@use '../../styles/variables' as *;
@use 'sass:color';
.leo-tabs-wrapper {
    .leo-tabs {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
        margin-bottom: 10px;
        border-bottom: $tabs-border-width solid $tabs-border-color;
        box-shadow: $tabs-box-shadow;
        .tab-item {
            cursor: pointer;
            transition: $tabs-transition;
            padding: $tabs-item-padding-y $tabs-item-padding-x;
            &:hover {
                color: $tabs-item-active-color;
            }
            &.is-active {
                color: $tabs-item-active-color;
                border-bottom: $tabs-item-active-border-width solid $tabs-item-active-color;
            }
            &.is-disabled {
                cursor: default;
                color: $tabs-item-disabled-color;
                border-bottom:none; 
            }
        }
    }
    .leo-tab-item-card {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 10px;
        list-style: none;
        box-shadow: none;
        border-bottom: $tabs-border-width solid $tabs-border-color;
        .tab-item {
            position: relative;
            cursor: pointer;
            transition: $tabs-transition;
            padding: $tabs-item-padding-y $tabs-item-padding-x;
            background-color: $tabs-item-card-background;
            border: $tabs-card-border-color solid $tabs-card-border-width;
            border-radius: $tabs-card-border-radius $tabs-card-border-radius 0 0;
            border-bottom:none;
            margin: 0 .5px;
            &:hover {
                color: $tabs-item-active-color;
            }
            &.is-active {
                color: $tabs-item-active-color;
                background: $tabs-item-active-card-background;
            }
            &.is-disabled {
                cursor: default;
                color: $tabs-item-disabled-color;
                border-bottom:none; 
            }
            .hide-line {
                position: absolute;
                width: 100%;
                height: 1px;
                left: 0;
                bottom: -1px;
                background-color: $white;
            }
        }
    }
    .tabs-large {
        font-size: $font-size-lg;
    }
    .tabs-small {
        font-size: $font-size-sm;
    }
    .tabs-middle {
        font-size: $font-size-base;
    }
    .tabs-top {
        display: flex;
    }
    .tabs-left {
        display: flex;
        flex-direction: column;
        .tab-item {
            cursor: pointer;
            transition: $tabs-transition;
            padding: $tabs-item-padding-y $tabs-item-padding-x;
            &:hover {
                color: $tabs-item-active-color;
            }
            &.is-active {
                color: $tabs-item-active-color;
                border-bottom:none; 
                border-left: $tabs-item-active-border-width solid $tabs-item-active-color;
            }
            &.is-disabled {
                cursor: default;
                color: $tabs-item-disabled-color;
                border-bottom:none; 
            }
        }
    }
    .leo-tabs-content {
        margin-left: 10px;
    }
}
.leo-tabs-wrapper-left {
    display: flex;
    .leo-tabs {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
        margin-bottom: 10px;
        border-right: $tabs-border-width solid $tabs-border-color;
        .tab-item {
            cursor: pointer;
            transition: $tabs-transition;
            padding: $tabs-item-padding-y $tabs-item-padding-x;
            &:hover {
                color: $tabs-item-active-color;
            }
            &.is-active {
                color: $tabs-item-active-color;
                border-bottom: $tabs-item-active-border-width solid $tabs-item-active-color;
            }
            &.is-disabled {
                cursor: default;
                color: $tabs-item-disabled-color;
                border-bottom:none; 
            }
        }
    }
    .leo-tab-item-card {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 10px;
        list-style: none;
        box-shadow: none;
        border-bottom: $tabs-border-width solid $tabs-border-color;
        .tab-item {
            position: relative;
            cursor: pointer;
            transition: $tabs-transition;
            padding: $tabs-item-padding-y $tabs-item-padding-x;
            background-color: $tabs-item-card-background;
            border: $tabs-card-border-color solid $tabs-card-border-width;
            border-radius: $tabs-card-border-radius $tabs-card-border-radius 0 0;
            border-bottom:none;
            margin: 0 .5px;
            &:hover {
                color: $tabs-item-active-color;
            }
            &.is-active {
                color: $tabs-item-active-color;
                background: $tabs-item-active-card-background;
            }
            &.is-disabled {
                cursor: default;
                color: $tabs-item-disabled-color;
                border-bottom:none; 
            }
            .hide-line {
                position: absolute;
                width: 100%;
                height: 1px;
                left: 0;
                bottom: -1px;
                background-color: $white;
            }
        }
    }
    .tabs-large {
        font-size: $font-size-lg;
    }
    .tabs-small {
        font-size: $font-size-sm;
    }
    .tabs-middle {
        font-size: $font-size-base;
    }
    .tabs-top {
        display: flex;
    }
    .tabs-left {
        display: flex;
        flex-direction: column;
        .tab-item {
            cursor: pointer;
            transition: $tabs-transition;
            padding: $tabs-item-padding-y $tabs-item-padding-x;
            &:hover {
                color: $tabs-item-active-color;
            }
            &.is-active {
                color: $tabs-item-active-color;
                border-bottom:none; 
                border-right: $tabs-item-active-border-width solid $tabs-item-active-color;
            }
            &.is-disabled {
                cursor: default;
                color: $tabs-item-disabled-color;
                border-bottom:none; 
            }
        }
    }
    .leo-tabs-content {
        margin-left: 10px;
    }
}
